<template>
    <div
        class="tsglcx"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="工单类 --> 投诉工单查询">
            <template slot="cardBody">
                <el-form
                    class="searchForm"
                    ref="searchForm"
                    :model="searchForm"
                    :inline="true"
                    :rules="rules"
                    label-position="right"
                    size="small"
                    label-width="100px"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="证件号:" label-position="left" prop="idcard">
                                <el-input placeholder="请输入证件号" v-model="searchForm.IdentNo"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="卡号:" label-position="left">
                                <el-input placeholder="请输入卡号" v-model="searchForm.CrdNo"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="来电号码:" label-position="left">
                                <el-input placeholder="请输入来电号码" v-model="searchForm.CallNo"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="客户名称:" label-position="left">
                                <el-input placeholder="请输入客户姓名" v-model="searchForm.CusNm"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label-position="left" prop="BgnDt" label="起始日期:">
                                <el-date-picker
                                    v-model="searchForm.BgnDt"
                                    type="date"
                                    placeholder="请选择起始日期"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    :picker-options="startOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="EndDt" label-position="left" label="结束日期:">
                                <el-date-picker
                                    v-model="searchForm.EndDt"
                                    type="date"
                                    placeholder="请选择结束日期"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    :picker-options="endtOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="btnBox">
                        <el-button type="primary" size="small" @click="handleConfirm">查 询</el-button>
                        <el-button type="primary" size="small" @click="handleConfirm1">工作流工单</el-button>
                        <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                    </el-row>
                </el-form>

                <!-- 查询结果 记录列表展示 -->
                <div class="infoList">
                    <el-table
                        :data="tableData"
                        border
                        header-row-class-name="headerRow"
                        ref="showListTable"
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="工单编号">
                            <template slot-scope="scope">{{scope.row.WrkId}}</template>
                        </el-table-column>
                        <el-table-column label="工单类型">
                            <template slot-scope="scope">{{scope.row.WrkTyp}}</template>
                        </el-table-column>
                        <el-table-column label="客户名称">
                            <template slot-scope="scope">{{scope.row.CusNm}}</template>
                        </el-table-column>
                        <el-table-column label="提交日期">
                            <template slot-scope="scope">{{scope.row.SetlDt}}</template>
                        </el-table-column>
                        <el-table-column label="受理人">
                            <template slot-scope="scope">{{scope.row.DealHndlr}}</template>
                        </el-table-column>
                        <el-table-column label="工单状态">
                            <template slot-scope="scope">{{scope.row.WrkSts}}</template>
                        </el-table-column>
                    </el-table>

                    <!-- <div class="footer">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                            :disabled="currentPageIndex <= 0"
                        >上一页</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                            :disabled="!nextButtonFlag"
                        >下一页</el-button>
                    </div>-->
                </div>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import moment from 'moment';
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'tsglcx',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            isShowCustomerInfo: false, // 客户信息模块显示控制
            certificateTypeList: [], // 证件类型列表
            applyStatusList: [], // 申请状态列表
            cardHolderList: [], // 主副卡标志列表
            descCanReasonList: [], // 审批原因列表
            customerInfo: { // ---------------------------- 客户信息
                CHINAME: '', // 中文姓名
                KEYTYPE: '', // 证件类型
                CUSTID: '', // 证件号码
                HOMEPHONE: '', // 家庭电话
                BUSIPHONE: '',
                BUSIEXT: '', // 公司电话（分机）
                MOBILEPHONE: '', // 手机
                BUSINAME: '', // 单位名称
                CONNAME1: '', // 联系人1姓名
                CONTEL1: '', // 联系人1电话
                CONNAME2: '', // 联系人2姓名
                CONTEL2: '', // 联系人2电话
            },
            searchForm: {
                CrdNo: '',//卡号
                IdentNo: '', // 证件号码
                CusNm: '',   // 姓名
                CallNo: '', //来电号码
                BgnDt: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 180))).format('YYYYMMDD'), // 开始日期 默认为当前日期往前六个月
                EndDt: moment(new Date()).format('YYYYMMDD'), // 结束日期 默认为当前日期

            },
            rules: { // 表单校验规则
                IdentNo: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
                //name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
                BgnDt: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 180))).format('YYYYMMDD'), // 开始日期 默认为当前日期往前六个月
                EndDt: moment(new Date()).format('YYYYMMDD'), // 结束日期 默认为当前日期
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchForm.EndDt) {
                        return time.getTime() > new Date(moment(this.searchForm.endDate).format('YYYYMMDD')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchForm.BgnDt) {
                        return time.getTime() < new Date(moment(this.searchForm.startDate).format('YYYYMMDD')).getTime();
                    }
                },
            },
            tableData: [], // 表格数据
            tableColumn: [ // 表格项
                {
                    label: '申请书条形码',
                    prop: 'APPREF',
                    width: '10%',
                },
                {
                    label: '录入日期',
                    prop: 'INPUTDT',
                    width: '10%',
                },
                {
                    label: '主附卡标志',
                    prop: 'CARDHOLDER',
                    width: '10%',
                },
                {
                    label: '申请状态',
                    prop: 'APPSTATUS',
                    width: '10%',
                },
                {
                    label: '审批代码',
                    prop: 'DECCANREA',
                    width: '10%',
                },
                {
                    label: '产品描述',
                    prop: 'PRODDESC',
                    width: '10%',
                },
                {
                    label: '审核日期',
                    prop: 'DECDATE',
                    width: '10%',
                },
                {
                    label: '制卡日期',
                    prop: 'ISSUEDATE',
                    width: '10%',
                },
                {
                    label: '推广地区机构',
                    prop: 'ABBRANCH',
                    width: '10%',
                },
                {
                    label: '推广人编号',
                    prop: 'ABUSERS',
                    width: '10%',
                },
            ],
            nextButtonFlag: false, // 下翻页按钮显示 控制阀
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页索引
        };
    },

    filters: {
        // 日期格斯转换
        getDate(str) {
            let curStr = '--';
            if (str.trim()) { // 有日期传入
                curStr = moment(str).format('YYYY-MM-DD');
            }
            return curStr;
        },

        // 状态转译
        getTextStatus(val, list) {
            let text = '';
            val += '';
            list.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },

        // 证件类型转译
        getKetTypeText(val, list) {
            let text = '';
            if (val) {
                list.forEach((item) => {
                    if (item.code === val) {
                        text = item.label;
                    }
                });
            }

            return text;
        },
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        userInfo: state => state.user.userInfo,
    }),

    mounted() {
        this.searchForm.IdentNo = this.cardInfo_3004.CUSTID;
        this.getBaseSelectData();
    },

    methods: {

        // 获取下拉选择基础数据
        async getBaseSelectData() {
            // 获取证件类型下拉选择列表
            this.certificateTypeList = await getDictSelectList('IDTYPE', this);
            this.searchForm.IDTYPE = this.certificateTypeList.length ? this.certificateTypeList[0].code : '';

            // 获取申请状态列表 APPSTATUS
            this.applyStatusList = await getDictSelectList('APPSTATUS', this);

            // 获取祝福卡标志列表
            this.cardHolderList = await getDictSelectList('MAFLAG', this);

            // 获取审批原因列表
            this.descCanReasonList = await getDictSelectList('APDEC', this);
        },

        // 确定按钮点击处理事件
        handleConfirm1() {
            // 
            let url = `/ccwf/com.cupd.crs.anonymous.view.OrderTask.d?CUSTNO=${this.cardInfo_3004.CUSTID}&BANKNUM=6440&USERID=${this.userInfo.userAccount}`;
            window.open(url);
        },
        // 确定按钮点击处理事件
        handleConfirm() {
            this.pageLoading = true;
            this.$refs.searchForm.validate(async (valid) => {
                if (valid) {
                    // 清空上一次查询的数据
                    this.tableData = [];

                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    // 跑 3072 交易
                    this.handleGetApplyDataList();
                } else {
                    this.pageLoading = false;
                }
            });
        },

        // 获取申请进度查询记录 -- 跑 00001交易
        handleGetApplyDataList() {
            // 设置请求参数 -- 0001 交易

            const appBody = {
                IdentNo: this.searchForm.IdentNo, // 证件类型
                BgnDt: this.searchForm.BgnDt, // 起始日期
                EndDt: this.searchForm.EndDt, //  结束日期

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '00001';
            params.body.appBody = appBody;

            // 跑 3072 交易
            this.$post.common.esbtran(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 00001');
                    if (result.sysHead.rspCd === '000000') {
                        const list = result.body.appBody.array.WrkShdInf || [];
                        this.tableData = list;

                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspDesc}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },


        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                }
                this.getListData();
            } else { // 切换到下一页
                getListData();
            }
        },

        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style lang="scss">
.tsglcx {
    .el-card.is-always-shadow,
    .el-card.is-hover-shadow:focus,
    .el-card.is-hover-shadow:hover {
        box-shadow: none;
    }
    .customerMessage {
        .el-card__header {
            font-size: 18px;
            font-weight: 600;
            padding: 10px 20px;
        }
    }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.tsglcx {
    min-height: 100%;
    background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;

    .btnBox {
        margin: 30px;
        text-align: right;
    }

    .customerMessage {
        margin: 30px 0;
        overflow: hidden;

        .infoBox {
            .infoItem {
                margin: 10px 0;

                .el-col {
                    display: flex;

                    .title {
                        width: 160px;
                        text-align: right;
                        padding-right: 10px;
                        color: #666;
                    }

                    .content {
                        flex: 1;
                        text-align: left;
                        color: #333;
                        font-weight: 600;
                    }
                }
            }
        }
    }

    .footer {
        text-align: center;
        margin-top: 30px;
    }
}
</style>
